<script setup>
import { userLogout } from "@/apis/user/user";
import { ref, watch } from "vue";
import { useRouter } from "vue-router";
import { questFun } from "@/apis/ai";
import { nextTick } from "vue";
//import { c } from "vite/dist/node/types.d-aGj9QkWt";

const dialogVisible = ref(false);

/**
 * 动态菜单数组
 */
const menus = ref([]);

const route = useRouter();
const data = ref({});
/**
 * 退出登录
 */
const quit = () => {
  route.push("/");
  // 清空缓存
  sessionStorage.clear;
};

// ai聊天窗口
const textarea = ref("");
const dialog = ref([]);

// 将提问封装为一个对象
const getTextareaObject = () => {
  return {
    quest: textarea.value,
  };
};

//提交按钮
const submit = async () => {
  dialog.value.push(textarea.value);
  flag.value = true;
  const result = await questFun(getTextareaObject());
  textarea.value = "";
  flag.value = false;
  dialog.value.push(result.data);
};

const flag = ref(false);

// ai聊天窗口结束
</script>
<template>
  <el-container>
    <el-header class="el-header">
      <el-menu mode="horizontal" :ellipsis="false" :router="true">
        <span class="title"> 商城 </span>
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
        <el-menu-item index="/usercenter"> 首页 </el-menu-item>
        <el-menu-item index="/order"> 订单中心 </el-menu-item>
        <el-menu-item index="/address"> 地址管理 </el-menu-item>
        <el-menu-item index="/wish"> 心愿单 </el-menu-item>
        <el-menu-item index="/collect"> 我的收藏 </el-menu-item>
        <el-menu-item index="/score"> 我的积分 </el-menu-item>

        <div style="flex-grow: 1" />
        <el-button class="logout" @click="quit">退出登录</el-button>
      </el-menu>
    </el-header>
    <el-container>
      <el-main>
        <el-scrollbar class="main-scrollbar">
          <router-view />
          <el-dialog
            v-model="dialogVisible"
            title="ai聊天 临时会话"
            width="1000"
            style="height: 580px"
            draggable
            top="10vh"
          >
            <el-scrollbar height="350px">
              <div v-for="(item, index) in dialog" :key="item">
                <el-icon v-if="index % 2 === 0" size="25" class="floating-icon"
                  ><User
                /></el-icon>
                <el-icon v-else size="25" class="floating-icon"
                  ><Opportunity
                /></el-icon>
                <el-text class="mx-1" v-if="index % 2 === 0" type="success"
                  >(您)</el-text
                >
                <el-text class="mx-1" v-else type="primary">(AI)</el-text>
                :
                <el-card
                  shadow="always"
                  :class="[
                    { dialog: index % 2 == 1 },
                    { user: index % 2 == 0 },
                  ]"
                >
                  {{ item }}
                </el-card>
              </div>
            </el-scrollbar>

            <template #footer>
              <el-divider />
              <el-input
                v-model="textarea"
                maxlength="3000"
                style="width: 100%"
                placeholder="输入内容开始聊天......"
                show-word-limit
                type="textarea"
                @keydown.enter="submit"
              />
              <div class="dialog-footer">
                <el-button
                  type="primary"
                  @click="submit"
                  :disabled="flag"
                  style="margin-top: 10px"
                  >发送</el-button
                >
              </div>
            </template>
          </el-dialog>
        </el-scrollbar>
        <!-- <el-button plain id="aibutton" @click="dialogVisible = true">
          AI 聊天
        </el-button> -->

        <div id="aibutton" @click="dialogVisible = true">
          <el-tooltip content="AI 聊天" placement="top">
            <img
              src="https://img.alicdn.com/imgextra/i1/O1CN01khO8o01EAwXZnPWhX_!!6000000000312-2-tps-144-144.png"
              alt="通义千问"
            />
          </el-tooltip>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<style lang="less" scoped>
/* ai 对话框 */
.ai {
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}

.floating-icon {
  position: relative;
  top: 8px;
  left: 0px;
}

.user {
  border-radius: 10px;
  text-align: left;
  position: relative;
  /* padding: 10px; */
  margin-top: 5px;
  margin-left: 0px;
  padding-left: 0px;
  width: 900px;
  /* 900px; */
  line-height: 2;
  background: rgba(17, 165, 127);
  color: #fff;
}

.dialog {
  border-radius: 10px;
  text-align: left;
  position: relative;
  /* padding: 10px; */
  margin-top: 5px;
  margin-left: 0px;
  padding-left: 0px;
  width: 900px;
  /* 900px; */
  line-height: 2;
  background: rgb(248, 248, 248);
  color: #000000;
}
/* ai 对话框 */

.el-header {
  padding: 0;
}

#aibutton {
  bottom: 0;
  position: fixed;
  margin-bottom: 80px;
  width: 100px;
  height: 50px;
  margin-left: 30px;

  width: 50px;
  height: 50px;
  cursor: pointer;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  img {
    width: 50px;
    height: 50px;
  }
}

.title {
  padding: 18px;
  font-weight: 700;
  font-size: 20px;
}

.main-scrollbar {
  height: calc(100vh - 100px);
}

.logout {
  margin-top: 15px;
  margin-right: 10px;
}

</style>
